<template>
  <div class="table-containner">
    <div class="tableTop">
      <el-row>
        <el-col :span="3"><div class="grid-content bg-purple">站点编号：GQ0001</div></el-col>
        <el-col :span="3"><div class="grid-content bg-purple-light">站点名称：广起云浮</div></el-col>
      </el-row>
    </div>
    <div  class="configtableList">
      <el-table
        :data="tableData"
        border
        stripe border fit highlight-current-row
        style="width: 100%;min-height:500px; "
        :header-cell-style="{background:'#D8DEE8',height: '20px',padding:'5px 0px'}"
      >
        <el-table-column
          type="index"
          label="序号"
          width="60px"
        >
        </el-table-column>
        <el-table-column
          v-for="(column, index) in cols"
          :prop="column.prop"
          :label="column.label"
          :key="index"
          :width="column.width"
          :sortable="column.sortable"
        >
        </el-table-column>
        <el-table-column
          type="index"
          label="操作"
          width="200px"
        >
          <template slot-scope="scope">
            <el-button class="tableIcon" title="查看" @click="viewRow(scope.$index,scope.row)" type="text" size="small">
              <i class="el-icon-view"></i>
            </el-button>
            <el-button @click="editRow(scope.$index,scope.row)" class="tableIcon" title="编辑" type="text" size="small">
              <i class="el-icon-edit-outline"></i>
            </el-button>
            <el-button  class="tableIcon" title="调试" type="text" size="small" @click="debug(scope.$index,scope.row)">
              <span  style="font-size: 12px; border: 1px solid #2BBC8C; margin-top: -18px; padding: 3px; position: absolute; color: #2BBC8C">调试</span>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container footerPage">
        <el-pagination :current-page="ListQuery.page" :page-sizes="[5, 10, 20, 50]" :page-size="ListQuery.limit" background layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
    <updata-dialog v-if="updateDialogShow" @giveFalse="UdialogReturn"></updata-dialog>
    <view-equip-info v-if="viewEquipInfoShow" @giveFalse="ViewdialogReturn"></view-equip-info>
    <view-debug v-if="debugShow"  @giveFalse="ViewdebugReturn"></view-debug>
  </div>
</template>
<script>
  import updataDialog from './updateSitting'
  import viewEquipInfo from './viewEquipInfo'
  import viewDebug from './debugging'
  export default {
    components: { updataDialog, viewEquipInfo, viewDebug },
    data() {
      return {
        name: '李四',
        updateDialogShow: false,
        viewEquipInfoShow: false, // 查看设备信息
        debugShow: false, // 调试
        // 时间
        value1: '',
        cols: [
          { prop: 'date', label: '设备编号', width: '190px', sortable: true },
          { prop: 'name', label: '设备名称', width: '200px', sortable: true },
          { prop: 'address', label: '通讯类型', width: '200px' },
          { prop: 'address', label: '通讯参数', sortable: true },
          { prop: 'address', label: '通讯状态', width: '180px', sortable: true }
        ],
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀',
          hello: '上海市普陀区'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市'
        }

        ],
        indexMethod: '',
        currentPage4: {
          page: 1
        },
        total: 0,
        ListQuery: {
          page: 1,
          limit: 20
        }
      }
    },
    methods: {
      handleSizeChange(val) {
        this.ListQuery.limit = val
      },
      handleCurrentChange(val) {
        this.ListQuery.page = val
      },
      // 父组件接收值
      UdialogReturn(data) {
        this.updateDialogShow = data // data仅仅代表参数 这里等同于子组件roleDialogMask
        console.log('11222')
        console.log(data)
      },
      // 查看设备父组件接收值
      ViewdialogReturn(data) {
        this.viewEquipInfoShow = data // data仅仅代表参数 这里等同于子组件roleDialogMask
        console.log('11222')
        console.log(data)
      },
      // 调试父组件接收值
      ViewdebugReturn(data) {
        this.debugShow = data // data仅仅代表参数 这里等同于子组件roleDialogMask
        console.log('11222')
        console.log(data)
      },
      // 编辑
      editRow(index, row) {
        this.updateDialogShow = !this.updateDialogShow
      },
      // 查看
      viewRow(index, row) {
        this.viewEquipInfoShow = !this.viewEquipInfoShow
      },
      // 调试
      debug(index, row) {
        this.debugShow = !this.debugShow
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .table-containner {
    width: 100%;
    min-height: 500px;
    .tableTop {
      width: 100%;
      min-height: 50px;
      background-color: #F0F3F5;
      font-size:14px;
      font-family:MicrosoftYaHei;
      font-weight:400;
      color:rgba(105,114,126,1);
      line-height: 20px;
      padding: 15px 20px 0px 20px;
    }
    .configtableList{
      width: 100%;
      min-height:20vw;

    }
    .footerPage{
      float: right;
      right:20px;
      position: relative;
    }
    .tableIcon {
      padding: 0px;
      font-size: 20px;
      font-weight: 500;
      color: #25B7C8;
    }

  }

</style>
